<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}
<html lang="en">

{% block content %}
    <head>
        <meta charset="UTF-8">
        <title>文章详情页</title>
    </head>
    {% csrf_token %}
    <style>
        .diggit {
            background: url('{% static 'font/upup.gif' %}') no-repeat;
            /*background: url("") no-repeat;*/
            float: left;
            width: 46px;
            height: 52px;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('{% static 'font/downdown.gif' %}') no-repeat;
            /*background:url("") no-repeat;*/
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
            color: orangered;
            font-size: 14px;
        }

        .diggword {
            clear: both;
            color: palevioletred;
            font-size: 14px;
        }

        input.author {
            background-image: url('{% static 'font/icon_form.gif' %}');
            background-repeat: no-repeat;
            border: 1px solid #cccccc;
            padding: 4px 4px 4px 30px;
            width: 300px;
            font-size: 16px;
            background-position: 3px -3px;
        }
    </style>
    <div class="article_info">
        <h3 class="text-center">{{ article_obj.title }}</h3>
        <div class="content">
            {{ article_obj.content | safe }}
        </div>

        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit action">
                    <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
                </div>
                <div class="buryit action">
                    <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips">
                </div>
            </div>
        </div>

        <div class="comments list-group">
            <p class="tree_btn">评论树</p>
            <div class="comment_tree">

            </div>
            <script>
                {# 用于评论树的局部刷新，与view中的get_comment_tree函数关联 #}
                $.ajax({
                    url: "/get_comment_tree/",
                    type: "get",
                    data: {
                        article_id: "{{ article_obj.pk }}"
                    },
                    success: function (comment_list) {
                        console.log(comment_list);

                        $.each(comment_list, function (index, comment_object) {
                            var pk = comment_object.pk;
                            var content = comment_object.content;
                            var parent_comment_id = comment_object.parent_comment_id;
                            var s = '<div class="comment_item" comment_id=' + pk + '><span>' + content + '</span></div>';
                            if (!parent_comment_id) {

                                $(".comment_tree").append(s);
                            } else {

                                $("[comment_id=" + parent_comment_id + "]").append(s);
                            }
                        })
                    }
                })
            </script>
        </div>
        <p>评论列表</p>
        <ul class="list-group comment_list">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div>
                        <a href=""># {{ forloop.counter }}</a> &nbsp;&nbsp;
                        <span> {{ comment.create_time|date:"Y-m-d H:i" }}</span> &nbsp;&nbsp;
                        <a><span>{{ comment.user.username }}</span></a> &nbsp;&nbsp;
                        <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk="{{ comment.pk }}">回复</a> &nbsp;&nbsp;
                    </div>
                    {% if comment.parent_comment_id %}
                        <div class="pid_info well">
                            <p>
                                {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}
                            </p>
                        </div>
                    {% endif %}
                    <div class="comment-con">
                        <p>{{ comment.content }}</p>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <p>发表评论</p>
        <p>昵称：<input type="text" id="xyz" class="author" disabled="disabled" size="50"
                     value="{{ user.username }}"></p>
        <p>评论内容</p>
        <textarea name="" id="comment_content" cols="45" rows="8"></textarea><br>
        <button class="btn btn-default comment_btn"></button>
    </div>
    <script>
        {# 用于提交评论，数据从标签中取得，交给views.comment存储，提交成功后触发对多次点赞的阻止和提示 #}
        $("#div_digg .action").click(function () {
            var is_up = $(this).hasClass("diggit");

            $obj = $(this).children("span");

            $.ajax({
                url: "/updown/", {#  需要自行实现该路径，也就是实现点赞行为记录之后返回提示的页面#}
                type: "post", {#  提交数据，使用PIOST请求#}
                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(), {# 帮助进行安全性校验 #}
                    "is_up": is_up,
                    "user_id": "{{ user.nid }}",
                    "article_id": "{{ article_obj.pk }}", {# 仅需要传递文章ID，点赞人与评论人即为当前文章的登陆者 #}
                }, {# 哪一个用户，对哪一篇文章，进行什么行为 #}
                success: function (data) {
                    console.log(data);

                    if (data.state) {
                        var val = parseInt($obj.text());
                        $obj.text(val + 1);
                    }  {# 如果状态码为true，说明是第一次操作 #}
                    else {
                        var val = data.handled ? "您已经推荐过!" : "您已经反对过!"
                        $("#digg_tips").html(val);

                        setTimeout(function () {
                            $("#digg_tips").html("")
                        }, 1000)
                    }
                }
            })
        });
        {# 从评论中获取数据，完成点击回复后跳转，输入内容作为子评论存入数据库的功能#}
        var pid = "";
        $(".comment_btn").click(function () {


            var content = $("#comment_content").val();
            if (pid) {
                var index = content.indexOf("\n");
                content = content.slice(index + 1)
            }

            $.ajax({
                url: "/comment/", {# 指定URL #}
                type: "post", {# 请求方式 #}
                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(), {# 帮助进行安全性校验 #}
                    "article_id": "{{ article_obj.pk }}",
                    "content": content, {# 该数据从H5标签中取得 #}
                    "user_id": "{{ user.nid }}",
                    "pid": pid, {# 默认为空，根评论本身就是父评论 #}
                },
                success: function (data) {  {# 回调函数，成功处理请求之后 #}
                    console.log(data);

                    var create_time = data.create_time;
                    var username = data.username;
                    var content = data.content;

                    var s = `
                            <li class= "list-group-item" >
                               < div >
                                    <span> ${create_time}</span> &nbsp;&nbsp;
                                    <a href=""><span>${username}</span></a> &nbsp;&nbsp;

                                </div>
                                <div class="comment-con">
                                    <p>${content}</p>
                                </div>
                                </li>`;

                    $("ul.comment_list").append(s);


                    {# 清空评论框内容 #}
                    pid = "",
                        $("#comment_content").val("");
                }
            })
        });
        {# 回复按钮事件 #}
        $(".reply_btn").click(function () {
            $('#comment_content').focus();
            var val = "@" + $(this).attr("username") + "\n";
            $('#comment_content').val(val);


            pid = $(this).attr("comment_pk");
        })
    </script>
{% endblock %}
</html>